<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		body {
			/* 之所以使用cover无法覆盖，则是因为我把background: url() no-repeat写到后面了 */
			background-size: cover;
			background-image: url(./images/back.jpg);
			background-repeat: no-repeat;
		}
		.title {
			font-size: 25px;
			color: #ffffff;
			text-align: center;
		}
		.login_form {
			width: 300px;
			height: 403px;
			background-color: rgba(255, 255, 255, 0.5);
			/* 外边的盒子水平居中 */
			margin: 45px auto;
			box-shadow: 0px 5px 5px;
			border-radius: 10px;
			/* 实现盒子里面的内容水平居中 */
			text-align: center;
		}
		.login_form .avatar {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin-top: 30px;
			margin-bottom: 25px;
		}
		.login_form .user {
			background-image: url(./images/user.png);
			background-repeat: no-repeat;
			background-position: 5px 5px;
		}
		.login_form .pwd {
			background-image: url(./images/lock.png);
			background-repeat: no-repeat;
			background-position: 5px 5px;
		}
		/* 用padding就可以调整输入和图标之间的距离了 */
		.login_form input {
			width: 200px;
			height: 25px;
			padding-left: 30px;
			border: 1px solid #a9a9a9;
			border-radius: 5px;
			margin-bottom: 20px;
			/* 取消默认的点击输入内横线框 */
			outline: none;
		}

		.login_form button {
			width: 234px;
			height: 30px;
			border-radius: 7px;
			margin-bottom: 20px;
			text-align: center;
			color: #ffffff;
			/* 取消默认的边框 */
			border: 0px;
		}
		.login_form .submit {
			background-color: #9acd32;
		}
		.login_form .register {
			background-color: #dc143c;
		}
	</style>
	<body>
		<!-- 问题：文字如何跟屏幕的大小发生变化 -->
		<div class="title">Hello! Welcome to DouZhi-IT!</div>
		<div class="login_form">
			<img src="./images/Boy.jpg" class="avatar" />
			<input type="text" class="user" placeholder="Username" />
			<input type="text" class="pwd" placeholder="Password" />
			<button class="submit">Submit</button>
			<button class="register">Register</button>
			<div>
				<a
					href=""
					style="float: right; margin-right: 30px; color: black"
					>Forgot Password?</a
				>
			</div>
		</div>
	</body>
</html>
